<template>
    <div class="login">
        <div class="register">
            <h3>考试管理系统</h3>
            <div class="register-list">
                <div class="name">
                    <div class="item">
                        <i class="el-icon-user-solid"></i>
                        <input type="text" class="name-box i" v-model="name" @blur="myFunction" name="name" placeholder="用户名">
                    </div>
                    <p v-show="nameShow">用户名不能少于5个字符</p>
                </div>
                <div class="password">
                    <div class="item">
                        <i class="el-icon-s-goods"></i>
                        <el-input v-model="password" show-password @blur="myFunction1" class="enterpriseName i" placeholder="密码"></el-input>
                    </div>
                    <p v-show="passwordShow">密码不能少于5个字符</p>
                </div>
                <div class="xuan">
                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                </div>
                <button @click="login"  :plain="plain">登录</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                name: '',
                password:'',
                nameShow:false,
                passwordShow:false,
                checked: false,
                arr:'123456',
                plain:true
            }
        },
        methods: {
            myFunction(){
                if(this.name == '' || this.name.length < 5){
                    this.nameShow = true
                }else{
                    this.nameShow = false
                }
            },
            myFunction1(){
                if(this.password == '' || this.password.length < 5){
                    this.passwordShow = true
                }else{
                    this.passwordShow = false
                }
            },
            login(){
                //保存输入的账号密码
                let obj = {
                    userName:this.name,
                    password:this.password,
                    remember:this.checked
                }
                this.axios({
                    url:"/api/user/login",
                    method:"post",
                    data:obj
                }).then(res=>{
                    console.log(res)
                    if(res.data.code == 1){
                        this.plain = true
                        localStorage.setItem("token",this.arr);
                        this.$router.push("/examIndex");
                        this.$message({
                            showClose: true,
                            message: '恭喜你，登录成功',
                            type: 'success'
                        });
                    }else{
                        this.plain = false;
                        this.$message({
                            showClose: true,
                            message: '账号或密码错误',
                            type: 'error'
                        });
                    }
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .enterpriseName .el-input__inner{
        border:none !important;
        background-color: transparent !important;
        padding:0 !important;
        height:49px!important;
        color: #c0c4cc !important;
    }
    .login{
        width:100vw;
        height:100vh;
        background:#2d3a4b;
        overflow: hidden;
        .register{
            position: relative;
            width:420px;
            margin:120px auto auto auto;
            overflow: hidden;
            background: rgba(252,254,255,.11);
            padding: 30px 50px 10px 50px;
            h3{
                font-size: 26px;
                color: #eee;
                margin: 0 auto 40px auto;
                text-align: center;
                font-weight: 700;
            }
            .register-list{
                width:100%;
                .name,.password{
                    position:relative;
                    margin-bottom:22px;
                    .item{
                        border: 1px solid hsla(0,0%,100%,.1);
                        background:#3d4855;
                        display:flex;
                        align-items: center;
                        .i::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
                            color: #c0c4cc;
                        }
                    }
                    p{
                        color:#ff4949;
                        position:absolute;
                        bottom:-18px;
                        left:0;
                        font-size: 12px;
                        line-height: 1;
                        padding-top: 4px;
                    }
                }
                .xuan{
                    margin-bottom:22px;
                }
                i{
                    color: #889aa4;
                    margin:0 5px;
                }
                .i{
                    height:49px;
                    width:95%;
                    border:0;
                    outline:none;
                    background:#3d4855;
                    color:#fff;caret-color: #fff;
                }
                button{
                    width: 100%;
                    margin-bottom: 30px;
                    background: #46a6ff;
                    border-color: #46a6ff;
                    color: #fff;
                    padding: 10px 20px;
                    font-size: 14px;
                    border-radius: 4px;
                }
            }
        }
    }
</style>